<template>
	<view class="u-page">
		<view class="header"></view>
		<view class="integral_section">
			 <view class="uninput" >
			  <uni-search-bar radius='50' bgColor="#ffffff" placeholder="请输入项目关键字搜索" cancelButton="none"  @blur="searchData" ></uni-search-bar>
			  </view>
		</view>
		<view class="content">
			<view class="projectList" v-if="lists !=''">
				<block v-for="(item, index) in lists" :key="item.pid">
					<view class="lists" @click="goPage('/pages/project/index?id='+item.pid)">
						<view class="images"><image :src="item.pic" mode=""></image></view>
						<view class="list_contnet">
							<view class="projecttitle">{{item.title}}</view>
							<view class="projectinfo"> {{item.contentInfo}}</view>
						</view>
					</view>
				</block>
			</view>
			<view class="projectList" v-else>
				<view class="zanwu">请更换搜索条件.</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[]
			}
		},
		methods: {
			async searchData(e){
				let where = e.value
				const project = await this.GQL({
						"operationName": "allSlProjects",
						"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title type tag status pic pid contentInfo } } }",
						"variables": {"filter": {"status": {"equalTo": "1"},"title":{'like':"%"+where+"%"}}}
				})
				console.log('11111',project)
				if(project.data.allSlProjects.nodes != ''){
					
					this.lists = project.data.allSlProjects.nodes
				}
				
			},
			goPage(page){
				uni.navigateTo({
					url:page
				})
			},
		}
	}
</script>

<style lang="scss">
	.header{
			width: 100%;
			height: 200px;
			background: linear-gradient(#C7171E ,#FBFCFE); /* 标准的语法 */
			
		}
		.integral_section{
			position: relative;
			top: -190px;
			margin: 15px;
			
			.uni-searchbar {
				padding: 0px;
				margin: 15px 0px;
			}
			.uni-searchbar__box {
				width: 100%;
				height: 30px;
				color: #bbbbbb;
				font-size: 28rpx;
				justify-content:flex-start;
			}
		}
		.content{
			position: relative;
			top: -190px;
			margin: 15px;
			background: #FFFFFF;
			min-height: 450px;
			border-radius: 5px;
			.projectList{
				.lists{
					// margin: 10px 0px;
					display: flex;
					padding: 10px 10px 5px 10px;
					border-bottom: 1px solid #f0f0f0;
					
					.list_contnet{
						margin-left: 5px;
						.projecttitle{
							width: 100%;
							height: 16px;
							overflow: hidden;
							font-size: 15px;
							font-weight: 400;
							color: #161E3E;
							line-height: 16px;
						}
						.projectinfo{
							margin: 10px 0px;
							font-size: 11px;
							font-weight: 400;
							color: #9BA7C1;
							line-height: 15px;
						}
						
					}
				}
				image{
					border-radius: 6px;
					width: 60px;
					height: 60px;
				}
			}
			.zanwu{
				    text-align: center;
				    padding: 10px;
					font-size: 15px;
					font-weight: 400;
					color: #bbbbbb;
					line-height: 16px;
			}
		}
	
</style>
